<template>
  <div style="margin-top: 40px">
    <el-form :model="distributeForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
      <el-form-item label="任务类型：" prop="taskAllocation">
        <!--任务分配方式 1为按照学院分配 2为按照专业分配 3为按照班级分配 4为按照学生分配 5为随机分配-->
        <el-radio-group v-model="distributeForm.taskAllocation">
          <el-radio-button :label="1">按照学院分配</el-radio-button>
          <el-radio-button :label="2">按照专业分配</el-radio-button>
          <el-radio-button :label="3">按照班级分配</el-radio-button>
          <el-radio-button :label="4">按照学生分配</el-radio-button>
          <el-radio-button :label="5">随机分配</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="选择学院：" prop="college" v-show="distributeForm.taskAllocation == 1 ||distributeForm.taskAllocation == 2 || distributeForm.taskAllocation == 3">
        <el-select v-model="distributeForm.selectedCollege" placeholder="请选择学院" @change="fetchMajors" clearable filterable>
          <el-option v-for="college in colleges" :key="college.collegeId" :label="college.collegeName" :value="college.collegeId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择专业：" prop="major" v-show="distributeForm.taskAllocation == 2 || distributeForm.taskAllocation == 3">
        <el-select v-model="distributeForm.selectedMajor" placeholder="请选择专业" @change="fetchClazzes" clearable filterable>
          <el-option v-for="major in majors" :key="major.majorId" :label="major.majorName" :value="major.majorId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择班级：" prop="clazz" v-show="distributeForm.taskAllocation == 3">
        <el-select v-model="distributeForm.selectedClazz" placeholder="请选择班级" @change="fetchTotalClassStudent" clearable filterable>
          <el-option v-for="clazz in clazzes" :key="clazz.clazzId" :label="clazz.clazzName" :value="clazz.clazzId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="输入学号：" prop="studentNumber" v-show="distributeForm.taskAllocation == 4">
        <el-input v-model="distributeForm.studentNumber" placeholder="请输入学号"></el-input>
      </el-form-item>
      <el-form-item label="参与人数：" prop="peopleNumber" v-show="distributeForm.taskAllocation === 5">
        <el-input-number v-model="distributeForm.peopleNumber"  :step="1" min="0" controls-position="right"></el-input-number>
      </el-form-item>
      <el-form-item style="text-align: center">
        <el-button size="medium" @click="handlePrev">上一步，选择任务地点</el-button>
        <el-button type="primary" size="medium" @click="handleFinishCommit">完成，提交任务</el-button>
        <el-button @click="resetForm('distributeForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import axios from "axios";

export default{
  name: "taskDistributeDetail",
  props: {
    addInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return{
      distributeForm: {
        taskAllocation:1,
        selectedCollege:null,
        selectedMajor:null,
        selectedClazz:null,
        studentNumber:"",
        peopleNumber:0
      },
      colleges:[],
      majors:[],
      clazzes:[],
      totalPeople:0,
      rules: {
        college: [
          { required: true, message: '请选择学院', trigger: 'blur' }
        ],
        major: [
          { required: true, message: '请选择专业', trigger: 'blur' }
        ],
        clazz: [
          { required: true, message: '请选择班级', trigger: 'blur' }
        ],
        studentNumber: [
          { required: true, message: '请输入学号', trigger: 'blur' }
        ],
        peopleNumber: [
          { required: true, message: '请输入参与人数', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value < 1 || value > this.totalPeople) {
                callback(new Error('参与人数必须为大于零且小于 ' + this.totalPeople + ' 的正整数'));
              }else if(!Number.isInteger(value)){
                callback(new Error('参与人数必须为正整数'));
              }
            }
          }
        ]
      },
      currentAddInfo: this.addInfo
    }

  },
  watch: {
    // 监听type变化
    'distributeForm.taskAllocation': function(newVal, oldVal){
      if (newVal !==  oldVal) {
        this.resetInputForm();
      }
    },
    addInfo(){
      this.currentAddInfo = this.addInfo;
    }

  },

  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    resetInputForm() {
      this.distributeForm = {
        taskAllocation:this.distributeForm.taskAllocation,
        selectedCollege:null,
        selectedMajor:null,
        selectedClazz:null,
        studentNumber:"",
        peopleNumber:0
      };
    },
    async fetchColleges() {
      const response = await axios.get('/selectorManage/getCollegeList');
      this.colleges = response.data.data;
      console.log("获取學院数组",this.distributeForm.selectedCollege);

    },
    async fetchMajors() {
      if (this.distributeForm.selectedCollege) {
        const response = await axios.get('/selectorManage/getMajorList/'+this.distributeForm.selectedCollege);
        this.majors = response.data.data;

        const response1 = await axios.get('/taskManage/totalCollegeStudent/'+this.distributeForm.selectedCollege);
        this.distributeForm.peopleNumber = response1.data.data;
        // 清空專業，班級列表
        console.log("總人數：",this.distributeForm.peopleNumber);
        this.clazzes = [];
      }
    },
    async fetchClazzes() {
      if (this.distributeForm.selectedMajor) {
        const response = await axios.get('/selectorManage/getClassList/'+this.distributeForm.selectedMajor);
        this.clazzes = response.data.data;

        const response1 = await axios.get('/taskManage/totalMajorStudent/'+this.distributeForm.selectedMajor);
        this.distributeForm.peopleNumber= response1.data.data;
        // 清空專業，班級列表
        console.log("總人數：",this.distributeForm.peopleNumber);
      }
    },
    async fetchTotalClassStudent() {
      const response = await axios.get('/taskManage/totalClassStudent/'+this.distributeForm.selectedClazz);
      this.distributeForm.peopleNumber = response.data.data;

      console.log("總人數：",this.distributeForm.peopleNumber);
    },
    async fetchTotalStudent() {
      const response = await axios.get('/taskManage/getTotalStudent');
      this.totalPeople = response.data;
      console.log("获取學生人數",this.totalPeople);

    },
    handlePrev(){
      let type = this.addInfo;
      console.log("返回上一步addInfo",type);
      /*if(this.addInfo.taskType==4){
        this.$emit('prevStep');
        this.$emit('prevStep');
      }*/
      this.$emit('prevStep')
    },
    async handleFinishCommit(){
      if(this.distributeForm.taskAllocation===4) {
        const response = await axios.get('/taskManage/totalStudent/'+this.distributeForm.studentNumber);
        this.distributeForm.peopleNumber = response.data.data;
      }
      this.$emit('getTaskDetail',this.distributeForm)
      this.$emit('finishCommit',this.isEdit);
    },
  },
  mounted() {
    this.fetchColleges();
    this.fetchTotalStudent();
  },


}
</script>

<style scoped>
</style>